<template>
  <div>
      <span>{{ count }}</span> |
      <span>{{ double }}</span> <br>
      <button @click="changecount">增加</button>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { computed, onMounted } from '@vue/runtime-core'
export default {
    setup () {
        const data = reactive({
            count: 0,
            double: computed(() => {
                return data.count * 2
            }),
            changecount:() => {
                data.count++
            }
        })
        onMounted(() => {
            data.count = 8
        })
        const result = toRefs(data)
        return {
            ...result
        }
    }
}
</script>

<style>

</style>